<!doctype html>
<html>
<head>
    <title>Knot.js Example - Mafia</title>
    <link rel="stylesheet" href="styles/example.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <link rel="stylesheet" href="./styles/github.css">
    <script src="js/highlight.pack"></script>

    <link rel="stylesheet" href="styles/tabpage.css">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>

    <script src="../src/core/PrivateScope.js"></script>
    <script src="../src/core/Utility.js"></script>
    <script src="../src/core/Deferred.js"></script>
    <script src="../src/core/AttachedData.js"></script>
    <script src="../src/core/DataObserver.js"></script>
    <script src="../src/core/ArrayMonitor.js"></script>
    <script src="../src/core/GlobalSymbolHelper.js"></script>
    <script src="../src/core/OptionParser.js"></script>
    <script src="../src/core/KnotManager.js"></script>
    <script src="../src/core/CBSLoader.js"></script>
    <script src="../src/core/HTMLAPProvider.js"></script>
    <script src="../src/core/HTMLKnotBuilder.js"></script>
    <script src="../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../src/core/ComponentAPProvider.js"></script>
    <script src="../src/core/KnotInterface.js"></script>

    <link rel="stylesheet" href="styles/tabpage.css" id="tabpageCSS">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs" id="tabpageCBS"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
    <script src="js/tabpage.js" id="tabPageSource"></script>
    <script type="text/javascript" src="js/sourceTab.js"></script>

    <script src="../src/debugger/knot.debug.js"></script>

    <link rel="stylesheet" href="styles/mafia.css" class="exampleCSS">
    <script type="text/cbs" src="cbs/mafia.cbs" class="exampleCBS"></script>
    <script src="js/DNDHelper.js"></script>
    <script src="js/mafia.js" class="exampleJS"></script>
    <script src="js/mafia.data.js" class="exampleJS" title="Initial Data"></script>

</head>
<body>

<section class="knot_example">
    <h2>Knot.js example - Mafia</h2>
    <div>
        <div id="systemTreePanel">
            <h3>Family Tree</h3>
            <ul id="systemTree">
            </ul>
        </div>

        <div id="editArea">
            <div>
                <h3>Editor</h3>
                <div></div>
                <div class="leaderArea">
                    <h4>Leader</h4>
                    <div class="leaderContainer"></div>
                    <div class="dropTarget">
                        No leader. Drop someone here to assign
                    </div>
                </div>
                <div class="buttonArea">
                    <button onclick="commitNewEntity()">OK</button>
                    <button onclick="cancelNew();">Cancel</button>
                </div>
            </div>
            <div id="addNew">
                <h4>Add New</h4>
                <select id="newEntityType">
                    <option value="gang">Gang</option>
                    <option value="white-business">White Business</option>
                    <option value="black-business">Black Business</option>
                    <option value="male" selected>Man</option>
                    <option value="female">Woman</option>
                </select>
                <button onclick="newEntity()" >Add</button>
            </div>
        </div>

        <div id="freeEntities"  class="dropTarget">
            <h3>Not assigned</h3>
            <div id="freeEntityList">
                <div class="contentContainer" knot-template></div>
            </div>
        </div>
    </div>

    <!-- item template for tree items, it uses "content" binding to show the actual content  -->
    <li class="treeNode" knot-template-id="treeNode">
        <div>
            <i class="expander iconButton fa fa-plus-circle"></i>
            <div class="content"></div>
        </div>
        <ul class="childrenList">
        </ul>
    </li>

    <!-- templates for gangs, one for presentation and one for editing -->
    <div knot-template-id="gangTemplate" class="gangTemplate contentPanel">
        <div class="title"></div>
        <div class="attributeTable">
            <div class="attributeItem" title="Number of businesses"><i class="fa fa-university"></i> <span class="businessCount">5</span></div>
            <div class="attributeItem" title="Number of hands"><i class="fa fa-users"></i> <span class="handsCount"></span></div>
        </div>
        <div class="people">
            <i class="fa fa-user-secret"></i>
            <div></div>
            <div class="dropTarget">
                No leader. Drop someone here to assign
            </div>
            <div class="clearFloat"></div>
        </div>
    </div>

    <div knot-template-id="gangEditorTemplate" class="gangEditor editorPanel">
        <h3>Gang <span class="new">(new)</span> </h3>
        <div class="title" >
            <div class="label">Title</span></div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
    </div>

    <!-- templates for white business, one for presentation and one for editing -->
    <div knot-template-id="whiteBusinessTemplate" class="whiteBusinessTemplate contentPanel">
        <div class="title"></div>
        <div class="attributeTable">
            <div class="attributeItem" title="Income"><i class="fa fa-money"></i> <span class="income"></span></div>
            <div class="attributeItem" title="Money landed">
                <i class="fa fa-paper-plane"></i> <span class="landedMoney"></span></div>
        </div>
        <div class="people">
            <i class="fa fa-user-secret"></i>
            <div></div>
            <div class="dropTarget">
                No leader. Drop someone here to assign
            </div>
            <div class="clearFloat"></div>
        </div>
    </div>

    <div knot-template-id="whiteBusinessEditorTemplate" class="whiteBusinessEditor editorPanel">
        <h3>Legal business<span class="new">(new)</span></h3>
        <div class="title">
            <div class="label">Title</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
        <div class="income">
            <div class="label">Income</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
        <div class="landedMoney">
            <div class="label">Landed Money</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
    </div>

    <!-- templates for black business, one for presentation and one for editing -->
    <div knot-template-id="blackBusinessTemplate" class="blackBusinessTemplate contentPanel">
        <div class="title"></div>
        <div class="attributeTable">
            <div class="attributeItem" title="Income"><i class="fa fa-money"></i> <span class="income">5</span></div>
            <div class="attributeItem" title="Case number"><i class="fa fa-fire"></i> <span class="caseNumber"></span></div>
            <div class="attributeItem" title="Exposure level"><i class="fa fa-lightbulb-o"></i> <span class="exposureLevel"></span></div>
        </div>
        <div class="people">
            <i class="fa fa-user-secret"></i>
            <div></div>
            <div class="dropTarget">
                No leader. Drop someone here to assign
            </div>
            <div class="clearFloat"></div>
        </div>
    </div>

    <div knot-template-id="blackBusinessEditorTemplate" class="blackBusinessEditor editorPanel">
        <h3>Black business<span class="new">(new)</span></h3>
        <div class="title">
            <div class="label">Title</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
        <div class="income">
            <div class="label">Income</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
        <div class="caseNumber">
            <div class="label">Case Number</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
        <div class="exposureLevel">
            <div class="label">Exposure Level</div>
            <select>
                <option value="s">Safe</option>
                <option value="w">Warning</option>
                <option value="d">Danger</option>
            </select>
        </div>
    </div>

    <!-- templates for man , one for presentation and one for editing -->
    <div knot-template-id="manTemplate" class="manTemplate contentPanel">
        <div class="title"></div>
        <div class="attributeTable">
            <div class="attributeItem" title="Intelligence"><i class="fa fa-graduation-cap"></i> <span class="intelligence"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
            <div class="attributeItem" title="Criminal skill"><i class="fa fa-unlock-alt"></i><span class="skill"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
            <div class="attributeItem" title="Loyalty"><i class="fa fa-bomb"></i> <span class="loyalty"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
            <div class="attributeItem" title="Strength"><i class="fa fa-gavel"></i> <span class="strength"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
        </div>
    </div>

    <div knot-template-id="manEditorTemplate" class="manEditor editorPanel">
        <h3>Man<span class="new">(new)</span></h3>
        <div class="name">
            <div class="label">Name</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
        <div class="intelligence">
            <div class="label">Intelligence</div>
            <select class="ratingLevel"></select>
        </div>
        <div class="skill">
            <div class="label">Skills</div>
            <select class="ratingLevel"></select>
        </div>
        <div class="loyalty">
            <div class="label">Loyalty</div>
            <select class="ratingLevel"></select>
        </div>

        <div class="strength">
            <div class="label">Strength</div>
            <select class="ratingLevel"></select>
        </div>
    </div>


    <!-- templates for woman, one for presentation and one for editing -->
    <div knot-template-id="womanTemplate" class="womanTemplate contentPanel">
        <div class="title"></div>
        <div class="attributeTable">
            <div class="attributeItem" title="Intelligence"><i class="fa fa-graduation-cap"></i> <span class="intelligence"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
            <div class="attributeItem" title="Criminal skill"><i class="fa fa-unlock-alt"></i> <span class="skill"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
            <div class="attributeItem" title="Loyalty"><i class="fa fa-bomb"></i> <span class="loyalty"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
            <div class="attributeItem" title="Attraction"><i class="fa fa-bolt"></i><span class="attraction"><i class="levelInStar fa fa-fw fa-star"></i></span></div>
        </div>
    </div>

    <div knot-template-id="womanEditorTemplate" class="womanEditor editorPanel">
        <h3>Woman<span class="new">(new)</span></h3>
        <div class="name">
            <div class="label">Name</div>
            <input type="text">
            <div><span class="errorMessage"></span></div>
        </div>
        <div class="intelligence">
            <div class="label">Intelligence</div>
            <select class="ratingLevel"></select>
        </div>
        <div class="skill">
            <div class="label">Skills</div>
            <select class="ratingLevel"></select>
        </div>
        <div class="loyalty">
            <div class="label">Loyalty</div>
            <select class="ratingLevel"></select>
        </div>

        <div class="attraction">
            <div class="label">Attraction</div>
            <select class="ratingLevel"></select>
        </div>
    </div>
</section>

<div id="dragDropTip"></div>
<div id="dragDropVisual"></div>
<div id="animationVisual"></div>

<div id="sourceTab" knot-debugger-ignore  knot-component="SourceTabPage">
</div>
<script type="text/cbs">
        #sourceTab{
            sourceInfo:/sourceCodeInfo.codes
        }
    </script>
<script>
    //collect source codes before knot changes the HTML
    window.sourceCodeInfo = {codes:null};

    window.SourceCodeHelper.collectSourceCodes(
            [{selector:".knot_example",title:"HTML", type:"html"},
                {selector:".exampleJS",title:"Javascript", type:"javascript"},
                {selector:".exampleCBS",title:"CBS", type:"cbs"},
                {selector:".exampleCSS",title:"CSS", type:"css"}],
            function(res){
                window.sourceCodeInfo.codes = res;
            });
</script>
</body>
</div>
</body>
</html>